<?php slot('profileNav', 'active') ?>

<script type="text/javascript" src="/js/fileupload.js"></script>
<script>
	first_page_load = true;

	function reloadFilesList() {
		//fix to make sure the first call does not override the call to the tab content
		
		if(!first_page_load)
		{
			$('#user-library-upload-form').hide();
			$.get("<?php echo url_for('user_profiles/library').'?id='.$user->getId()?>", {}, function(data){ $('.profile-nav').next().replaceWith(data);});	
		}

		first_page_load = false;
	}

	function uploadFormRef() {
		return '#user-library-upload-form';
	}
</script>

<div id="wrapper" class="profile">
	<div id="content">
		<div id="sidebar">
			<?= render_avatar($user, null, array('id'=>"avatar" ,'alt'=>"Avatar")) ?>
			
			<?php 
			if($sf_user->getId() == $user->getId()){
				include_component("messages","sidebarnav", array("user_id" => $user->getId()));
			}
			?>
			
			<div class="module info">
				<h3 class="gradient dark">Quick Info</h3>
				<div class="inner">
					<p>
						<?php echo isset($user_profile) ? $user_profile->getAboutMe() : '' ?>
					</p>
					<ul>
						<li>
							<p class="label">School(s):</p>
							<p>
								<?php echo $user->getNetworkDisplayName(); ?>
							</p>
						</li>
						<li>
							<p class="label">Books:</p>
							<p>
								<?php echo isset($user_profile) ? $user_profile->getFavoriteBooks() : '' ?>
							</p>
						</li>
					</ul>
				</div>
			</div>
			
		</div>

		<div id="main">
			<div class="profile-heading">
					<p class="join-date">Member since <?= $user->getCreatedAt('%B %Y') ?></p>
					<h1><?= $user->getFullName() ?></h1>
					<p class="term"><?= $user->getStanding() ?></p>
					<ul>
						<li class="envelope">
							<?php if($sf_user->isCurrentUser($user->getId())): ?>
								<?php echo link_to('Edit Your Profile', 'user_profiles/edit') ?>
							<?php endif ?>
						</li>					
						<!-- 
						<li class="arrow"><a href="#">View Your Followers</a></li>
						-->
						<?php if(isset($user_profile) && $user_profile->getWebsite() != null): ?>
						<li class="globe">
							<a target="_blank" href="<?php echo $user_profile->getWebsite() ?>"><?php 
								echo ($sf_user->isCurrentUser($user->getId()) ? 'Your' : render_display_name($user)."'s") ." Website";
							?></a>
						<?php endif ?>
						</li>
						
					</ul>
				</div>

			<div class="profile-nav">
				<ul class="display-options">
					<?php if($sf_user->isCurrentUser($user->getId())): ?>		
						<li style="display:none;" id="library_upload_option" class="upload">
							<a class="btn_upload" href="#">Upload</a>
							<?php include_partial('user_profiles/libraryUploadForm');?>
						</li>
					<?php else: ?>
						<li><a></a></li>
					<?php endif?>
				</ul>
				<ul class="by-section">
					<li>
					
							<a href="<?php echo url_for('user_profiles/recentactivity').'?id='.$user->getId()?>">Recent Activity</a>
							<div style="display:none">
							<ul>
								<li><a></a></li>
							</ul>
							</div>
					
					</li>
					<li>
					
						<a href="<?php echo url_for('user_profiles/notes').'?id='.$user->getId()?>">Notes</a>
							<div style="display:none">
							<ul>
								<li class="active"><a class="btn_detail" href="<?php echo url_for('notes/profiledetail').'?id='.$user->getId()?>">Detail view</a></li>
								<li><a class="btn_list" href="<?php echo url_for('notes/profilelist').'?id='.$user->getId()?>">List view</a></li>
								<li><a class="btn_by-course" href="<?php echo url_for('notes/profilecourse').'?id='.$user->getId()?>">By Course</a></li>
							</ul>
							</div>
					</li>
					<li>
					
						<a href="<?php echo url_for('user_profiles/annotations').'?id='.$user->getId()?>">Annotations</a>
						
						<div style="display:none;">	
							<ul>
								<li class="active">
								<a></a>
								</li>
							</ul>
						</div>
					</li>
					<li>
							<a href="<?php echo url_for('user_profiles/courses').'?id='.$user->getId()?>">Courses</a>
																	
							<div style="display:none">
								<ul>
									<!--<li class="active"><a class="btn_detail" href="#">Detail view</a></li>
									<li><a class="btn_list" href="#">List view</a></li>-->
									<li><a></a></li>
								</ul>
							</div>
					</li>
					<li>
					
					<a href="<?php echo url_for('user_profiles/library').'?id='.$user->getId()?>">Library</a>
							<div style="display:none">
							<ul>
								<li class="active"><a class="btn_detail" href="<?php echo url_for('library/profileList').'?id='.$user->getId()?>">Detail view</a></li>
								<li><a class="btn_list" href="<?php echo url_for('library/profileThumbnail').'?id='.$user->getId()?>">List view</a></li>
								<li><a class="btn_category" href="<?php echo url_for('library/profileCategory').'?id='.$user->getId()?>">Category view</a></li>
							</ul>
							</div>
					
					</li>
					
					
					
				</ul>
					<h4 style="display:none;"></h4>
			</div>
			
			<div>
				Loading Content...
			</div>

		</div>
	</div>
</div>


<div id="follow_course_form" style="display:none;">

	<div>
		<label>Follow A Course: </label>
		
		<br/>
		<label> Subject</label>
			<select class="course_subject_selector">
			<?php foreach($subjects as $subject):?>
				<option value="<?php echo $subject->getId()?>" size="10"><?php echo $subject->getName()?></option>
			<?php endforeach?>
			</select>
			
		<br/>
		<label> Course</label>
			<select class="course_course_selector"></select>
			
		<br/>
			<input type="button" class="course_follow_submit" value="submit"/>
			<a href="#" class="course_cancel">cancel</a>
	
	</div>
	
</div>


<script>

//bind tabs for ajax navigation
	
	
	
	/**
	*  show tab content when clicked
	*/
	function displayTabContent(element) {
		//redistribute css
		$('.by-section > li').attr('class', '');

		//change button look
		//grab text to find its form equivalent
		tab_text = $(element).children().eq(0).text();

		//for add course form
		<?php if($sf_user->getId() == $user->getId()):?>
		if(tab_text == 'Courses')
		{
			$(element).addClass('drop-down');
		}
 
		<?php endif?>

		
		//if there is a form equivalent then dispaly it as an active drop down
		$(element).addClass('active');
			
		
		//get the href for the clicked tab
		url = $(element).children().eq(0).attr('href');
		
		
		//redisplay content
		$.get( url, {},
				function(data) {

					bindExpandNotes();
					bindOptionButtons(element);
					$('.profile-nav').next().replaceWith(data);
					bindFollowDelete();
				}
		
		);
		return false;
		
	}
	
	
	/**
	*  Bind tab links
	*/
	function bindTabs() {
		$('.by-section > li').click(function()
			{

					if($(this).hasClass('drop-down'))
					{
						showCourseForm();
						return false;
					}
					else
					{				
						//hide extra content generate by tabs
						$('.profile-nav > h4').hide();
						$('#library-upload').hide();
	
						displayTabContent(this); 
						return false;
					}
			});
	}


	//refresh option buttons after new data is displayed
	function bindOptionButtons(element)
	{ 
		
		//redisplay new buttons
		//remove all buttons except the form button
		$('.display-options').children().filter(function(index){return (index != 0);}).remove();

		//add new buttons after form
		$('.display-options').children().eq(0).after($(element).children().eq(1).children().eq(0).html());

		//hide upload button and redisplay it this is the library tab
		$('.upload').hide();
		if($(element).children().eq(0).text() == 'Library')
		{
			$('.upload').show();
		}
		
		
		//bind ajax request to buttons
		$('.display-options > li').filter(function(index){return (index != 0);}).click(function()
				{
						displayOption(this);
						return false;
				}
				);
		
	} 


	//display new option
	function displayOption(element)
	{

		$('.display-options > li').filter(function(index){return (index != 0);}).attr('class', '');
		$(element).attr('class', 'active');
	
		//get the href for the clicked tab
		url = $(element).children().eq(0).attr('href');
	
		
		//redisplay content
		$.get( url, {},
				function(data) {
					$('.profile-nav').next().replaceWith(data);
					$('.profile-nav > h4').hide();

					bindExpandNotes();	
				}
		
		);
		return false;
	}

	
//====END TABS ======================//


//=======================upload file functions

//bind form functions
	function bindUploadButton()
	{
		$('.upload').click(
				function()
				{
					$('.upload-modal').show();
				}
				);

	}



	//show dropdown for file upload
	function bindUploadLink(){

		$('.btn_upload').click(
				function(){

					$('.upload-modal').show();
					return false;
				});
	}


	//bind form cancle button
	function bindFormCancel()
	{
		$('#upload-cancel').click(
				function()
				{
					$('.upload-modal').hide();
					return false;
				}
				);
	}

//=== course note , course view expansion
	function bindExpandNotes()
	{
		$('.btn_expand').click(
			function(){

				//show title
					var title = '<a class="btn_collapse" href="#">Collapse</a>'+$(this).next().children().eq(0).html();
					$('.profile-nav > h4').html(title);
					$('.profile-nav > h4').show();
					
				//show notes
					var notes = $(this).next().children().eq(2).children();

					//display using animation
					$(notes).hide();
					$('.profile-nav').next().replaceWith(notes);
					$('.profile-nav').next().show(750);
					
				//bind colapase button
				bindCollapseNotes();

				return false;
				}
				);
	}

	function bindCollapseNotes()
	{
		$('.btn_collapse').click(
				function()
				{
					//remove header
					$('.profile-nav > h4').hide();
	
					//redisplay course view
					url = '<?php echo url_for('notes/profilecourse').'?id='.$user->getId()?>';
					$.get( url, {},
					function(data) {
						$('.profile-nav').next().replaceWith(data);

						//rebind expand links
						bindExpandNotes();							
					});
	
					return false;
				}
				);
	}


//================ follow course functions




//function for subject and course dropdown generator

	function showCourseForm()
	{
		//first clear for to renew 
		closeCourseForm();
			
		$('.profile-nav > h4').html($('#follow_course_form').html());
		$('.profile-nav > h4').show();

		//bind functionality
		$('.course_follow_submit').click(submitCourseForm);
		bindCourseForm();
		bindCourseCancel();

		//activate first subject selection
		$('h4 > div').children().filter(function(index){return $(this).hasClass('course_subject_selector')}).change();
	}
	
	function closeCourseForm()
	{
		$('.profile-nav > h4').empty();
		$('.profile-nav > h4').hide();
	}
	
	function bindCourseForm()
	{
		$('.course_subject_selector').change(
				function(){
					subject_id = $(this).val();
					changeSubject(subject_id);
				});
		
	}

	function bindCourseCancel()
	{
		$('.course_cancel').click(
				function(){
					closeCourseForm();
					return false;
				});
		
	}

	function changeSubject(id)
	{
		$.get('<?php echo url_for('courses/selectbox')?>',
				{subject_id: id},
				function(data){
					
					$('.course_course_selector').html(data);
				});
	}

	
	function submitCourseForm()
	{
		id = $('.course_course_selector').val();
		$.get('<?php  echo url_for('follow_courses/add')?>',
				{user_id: <?php echo $user->getId() ?>, course_id: id},
				function(data){

					//close form and refresh course data
					closeCourseForm();
					
					$.get('<?php  echo url_for('user_profiles/courses')?>',
							{user_id: <?php echo $user->getId() ?>},
						function(data){
								$('.profile-nav').next().replaceWith(data);
								bindFollowDelete();		
								});
					});
	}



	function bindFollowDelete()
	{
		$('.course_follow_delete').click(function(){
				course_id = $(this).attr('href');

				$.get('<?php  echo url_for('follow_courses/delete')?>',
						{user_id: <?php echo $user->getId() ?>, course_id: course_id},
						function(data){

							//close form and refresh course data
							closeCourseForm();
							
							$.get('<?php  echo url_for('user_profiles/courses')?>',
									{id: <?php echo $user->getId() ?>},
								function(data){
										$('.profile-nav').next().replaceWith(data);
										bindFollowDelete();
										});
							});
			return false;						
			});
	}
	
	$(document).ready(function(){
		bindTabs();

		bindUploadButton();
		bindFormCancel();
		bindUploadLink();

		
		$('.by-section > li').eq(0).click();
		
	});
	
</script>

